<template>
  <div>
    <a-tree
      ref="aTreeRef"
      v-model="treeData"
      showCheckbox
      :isIcon="false"
      childrenIcon
      checkStrictly
      :defaultExpandedKeys="defaultExpandedKeys"
      @handleNodeClick="handleNodeClick"
      @handleLabelClick="handleLabelClick"
      @handleCheckChange="handleCheckChange"
    >
      <!-- 自定义图标 -->
      <template #icon="{ data }">
        <svg-icon
          v-if="!data.isExpand && data.children?.length"
          icon-class="no-folder"
        />
        <svg-icon
          v-if="data.isExpand && data.children?.length"
          icon-class="folder"
        />
        <svg-icon
          v-if="!data.children && !data.children?.length"
          icon-class="file"
        />
      </template>
    </a-tree>

    <el-button style="margin-top: 6px" type="primary" @click="handleSubmit"
      >确定</el-button
    >
  </div>
</template>

<script setup lang="ts">
import aTree from "@/components/aTree/index.vue";
const aTreeRef = ref();
const submitData = ref([]);
const defaultExpandedKeys = ref([1, 4]);
const treeData = ref([
  {
    id: 1,
    label: "Level one 1",
    isExpand: false,
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        isExpand: false,
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
            isExpand: false,
          },
          {
            id: 10,
            label: "Level three 1-1-2",
            isExpand: false,
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    isExpand: false,
    children: [
      {
        id: 5,
        label: "Level two 2-1",
        isExpand: false,
      },
      {
        id: 6,
        label: "Level two 2-2",
        isExpand: false,
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    isExpand: false,
    children: [
      {
        id: 7,
        label: "Level two 3-1",
        isExpand: false,
      },
      {
        id: 8,
        label: "Level two 3-2",
        isExpand: false,
      },
    ],
  },
]);

function handleNodeClick(data, node) {
  console.log("-=======", node);
  if (data.children && data.children.length) {
    data.isExpand = !data.isExpand;
  }
}

function handleLabelClick(data, node) {
  // console.log("handleLabelClick", data, node);
}

function handleCheckChange(data, checked) {
  const list = aTreeRef.value.treeRef.getCheckedNodes();
  // console.log('list', list)
  submitData.value = list;
  if (list.length > 1) {
    aTreeRef.value.treeRef.setCheckedKeys([]);
    aTreeRef.value.treeRef.setChecked(data.id, true);
  }
}

function handleSubmit() {
  console.log("=====", submitData.value);
}

function recursionFn(arr) {
  arr.forEach((item) => {
    if (defaultExpandedKeys.value.includes(item.id)) {
      item.isExpand = true;
    }
    if (item.children && item.children.length) {
      recursionFn(item.children);
    }
  });
}

onMounted(() => {
  // 递归当前需要展开的图标样式
  recursionFn(treeData.value);
});
</script>

<style lang="scss" scoped>
/* 
* 隐藏父节点选择框
*/
:deep(.customTree) {
  .el-tree-node {
    .el-tree-node__content {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
  }
}
</style>